Skip to main content

Slider

Detailed Description​

The Slider is the classic widget for controlling a bounded value. It lets the user move a slider handle along a horizontal or vertical groove.

Event​

The slider has thumb release and value change events.
A thumb release event is emitted when the user releases the slider.
A value change event is emitted when the slider's value has changed.
When the user drags the slider, the value change event is continuously emitted. In some scenarios, it is only necessary to listen for the thumb release event for efficiency.

// Listen for the thumb release event
slider.bind('thumbReleased', (event: ThumbReleaseEvent): void => {
    event.value; // The current value of the slider.
});
// Listen for the value change event
slider.bind('valueChanged', (event: ValueChangeEvent): void => {
    event.value; // The current value of the slider.
})

Example code​

In the code below, you will create a slider:

const desktop = Desktop.instance();
const slider = new Slider(desktop);
slider.minimum = -45;
slider.maximum = 50;
slider.value = 26;

The orientation parameter of constructor determines whether the slider is horizontal or vertical:

const desktop = Desktop.instance();
const slider = new Slider(desktop, Orientation.Vertical);
slider.value = 68;